<!-- 词云 -->
<template>
  <div :id="props.id" style="width: 100%;height: 100%"></div>
</template>

<script setup lang="ts" name="HzEchartsWordCloud2">
import 'echarts-wordcloud';
import * as echarts from 'echarts';
// @ts-ignore
import {onMounted} from 'vue';
// @ts-ignore
import {getEchartsTheme} from "/@utils/GlobalFunction.ts";
import {loadEchartsData} from "/@api/hz-bigscreen-api";

const props = defineProps({
  id: {
    type: String,
    default: 'pie-simple'
  },
  showTitle: {
    type: Boolean,
    default: true
  },
  showLegend: {
    type: Boolean,
    default: true
  },
  showTooltip: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: '基础词云'
  },
  data:{
    type:Array,
    default:()=>{
      return [{
        name: "Jayfee",
        value: 666
      }, {
        name: "Nancy",
        value: 520
      }, {
        name: "生活资源",
        value: "999"
      }, {
        name: "供热管理",
        value: "888"
      }, {
        name: "供气质量",
        value: "777"
      }, {
        name: "生活用水管理",
        value: "688"
      }, {
        name: "一次供水问题",
        value: "588"
      }, {
        name: "交通运输",
        value: "516"
      }, {
        name: "城市交通",
        value: "515"
      }, {
        name: "环境保护",
        value: "483"
      }, {
        name: "房地产管理",
        value: "462"
      }, {
        name: "城乡建设",
        value: "449"
      }, {
        name: "社会保障与福利",
        value: "429"
      }, {
        name: "社会保障",
        value: "407"
      }, {
        name: "文体与教育管理",
        value: "406"
      }, {
        name: "公共安全",
        value: "406"
      }, {
        name: "公交运输管理",
        value: "386"
      }, {
        name: "出租车运营管理",
        value: "385"
      }, {
        name: "供热管理",
        value: "375"
      }, {
        name: "市容环卫",
        value: "355"
      }, {
        name: "自然资源管理",
        value: "355"
      }, {
        name: "粉尘污染",
        value: "335"
      }, {
        name: "噪声污染",
        value: "324"
      }]
    }
  },
  apiPath: { // api路径
    type: String,
    default: ''
  },
  chartsType: { // 图表类型
    type: String,
    default: 'wordCloud'
  },
  methodType: {
    type: String, // 请求方式
    default: 'get'
  }
});
// 画布的宽高
const canvas = ref({
  width: 1920,
  height: 963
})

const scale = ref(1)

const option = {
  backgroundColor: '#131f56',
  title: {
    text: props.title,
    left: 'center',
    textStyle: {
      color: '#fff'
    },
    show: props.showTitle
  },
  tooltip: {
    show: props.showTooltip
  },
  series: [{
    name: '热点分析',
    type: 'wordCloud',
    // size: ['9%', '99%'],
    sizeRange: [14, 20],//最小文字——最大文字
    // textRotation: [0, 45, 90, -45],
    rotationRange: [0, 0],//旋转角度区间
    // rotationStep: 90,//旋转角度间隔
    shape: 'circle',
    gridSize: 30,//字符间距
    textPadding: 0,
    autoSize: {
      enable: true,
      minSize: 6
    },
    textStyle: {
      color: function () {
        return 'rgb(' + [
          Math.round(Math.random() * 105) + 150,
          Math.round(Math.random() * 105) + 150,
          Math.round(Math.random() * 105) + 150
        ].join(',') + ')';
      },
      borderColor: '#0ff',
      borderWidth: 1,
      borderRadius: 20,
      padding: [8, 10, 5, 10],
      backgroundColor: 'rgba(0,255,255,.2)',
      emphasis: {
        shadowBlur: 10,
        shadowColor: '#333'
      },
    },
    data: props.data
  }]
};

onMounted(() => {
  scale.value = Math.min(window.innerWidth/canvas.value.width, window.innerHeight/canvas.value.height)
  //@ts-ignore
  document.body.style.zoom = scale.toString()
  init()
});

// 解决全局缩放导致的echarts canvas鼠标位置不准确的问题
const updateZoom = () => {
  const zoomValue = 1 / scale.value;
  const chartContainer = document.getElementById(props.id);
  if (chartContainer) {
    chartContainer.style.zoom = zoomValue.toString();
  }
};
// 监听 scale 的变化
watch(scale, () => {
  updateZoom();
});

const basicBar = ref();

function init() {
  basicBar.value = markRaw(echarts.init(document.getElementById(props.id), getEchartsTheme));
  basicBar.value.setOption(option);
  window.addEventListener('resize', () => {
    basicBar.value.resize();
  });
}

// 刷新图表方式，该方法需要提供给外部调用
// eslint-disable-next-line no-unused-vars
const refreshCharts = (data:any) => {
  option.series[0].data = data.data;
  option.title.text = data.title;
  const basicBar = echarts.init(document.getElementById(props.id), getEchartsTheme());
  basicBar.setOption(option);
};
// 刷新图表  根据apiPath，method，type query获取数据
const refreshChartsByApi = async (query : any) => {
  // 如果query中没有封装type则给query添加type属性
  if (!query.hasOwnProperty('chart_type')) {
    query.chart_type = props.chartsType
  }
  const s = await loadEchartsData(props.apiPath, props.methodType, query)
  refreshCharts(s.data)
}

// 重置图表大小
const resizeEcharts = () => {
  basicBar.value.resize();
}

// eslint-disable-next-line no-undef
defineExpose({
  refreshCharts,
  resizeEcharts,
  refreshChartsByApi
});

</script>

<style scoped>

</style>